<script setup>
import { watch, watchEffect } from 'vue';

    /**
     * watch用法
     */
    // 监视ref数据
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    })

    // 监视reactive数据
    const user = reactive({
        name: '张三',
        age: 18
    })
    watch(user, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    }) // 自动启用深度监视

    /**
     * watchEffect
     */
    const flag = ref(true)
    watchEffect(() => {
        // console.log(flag.value)
        // console.log(user.name)
    })

</script>

<template>  
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>
    <hr>

    <p>{{ user.name }}</p>
    <button @click="user.name='李四'">修改user.name</button>

</template>

<style scoped>

</style>